<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

      .flex-container {
          display: flex;
          background: #FFEC67;
          width: 700px;
          height: 300px;
          justify-content: flex-start;
          align-items: center;
      }

      .box {
          width: 300px;
          height: 100px;
          background: #eee;
          text-align: center;
          line-height: 100px;
          border-radius: 4px;
          box-shadow: 0px 1px 3px rgba(0, 0, 0, .18);
          font-size: 2em;
          flex: 1 1 200px;
      }

      .A {
          background-color: #EB8A00;
      }

      .B {
          background-color: #F5492F;
      }

      .C {
          background-color: #D535DE;
      }

      /*.D {
          background-color: #442FF5;
      }

      .E {
          background-color: #2DB4EB;
      }*/

  </style>
</head>
<body>
<div class="flex-container">
  <div class="box A">A</div>
  <div class="box B">B</div>
  <div class="box C">C</div>
  <!-- <div class="box D">D</div>
   <div class="box E">E</div>-->
</div>
</body>
</html>